﻿<!--@jQuery-->
<div id="gridContainer" style="height:400px; max-width:800px; margin: 0 auto"></div>
<!--/@jQuery-->
<!--@Knockout-->
<div id="gridContainer" style="height:400px; max-width:800px; margin: 0 auto" data-bind="dxDataGrid: {
     dataSource: orders,
     columns: [
         { dataField: 'OrderID', width: 100 },
         'CustomerID',
         { dataField: 'OrderDate', dataType: 'date' },
         { dataField: 'ShippedDate', dataType: 'date' },
         'ShipName',
         { dataField: 'ShipCountry', caption: 'Ship To' }
     ],
     pager: { visible: false },
     scrolling: { mode: 'virtual' },
     searchPanel: { visible: true }
}"></div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController">
    <div id="gridContainer" style="height:400px; max-width:800px; margin: 0 auto" dx-data-grid="{
        dataSource: orders,
        columns: [
            { dataField: 'OrderID', width: 100 },
            'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ],
        pager: { visible: false },
        scrolling: { mode: 'virtual' },
        searchPanel: { visible: true }
    }"></div>
</div>
<!--/@AngularJS-->